<template>
    <div class="app-container">
        <!-- 基础信息 -->
        <h5 class="titleInfo">
            基础信息
        </h5>
        <el-form class="form" ref="form" :rules="rules" :model="form" label-width="130px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="医院名称" prop="name">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="医院简介" prop="description">
                        <el-input v-model="form.description"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="省市区" prop="provinceId">
                        <el-cascader
                            :options="options"
                            v-model="selectedOptions"
                            @change="pcaList">
                        </el-cascader>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="详细地址" prop="address">
                        <el-input v-model="form.address"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="是否上架" prop="status">
                         <el-select v-model="form.status" placeholder="请选择">
                            <el-option
                            v-for="item in statusOption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="所属分公司" prop="officeId">
                        <!-- <el-input v-model="form.officeId"></el-input> -->
                        <el-select v-model="form.officeId" placeholder="请选择">
                            <el-option
                                v-for="item in officeOption"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="经度" prop="lng">
                        <el-input v-model="form.lng"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="纬度" prop="lat">
                        <el-input v-model="form.lat"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="医院标签">
                        <!-- <el-input v-model="form.tagsId"></el-input> -->
                        <el-select v-model="form.tagsId" placeholder="请选择">
                            <el-option
                            v-for="item in tagOption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="贷款平台">
                        <!-- <el-input v-model="form.loanId"></el-input> -->
                        <el-select v-model="form.loanId" placeholder="请选择">
                            <el-option
                                v-for="item in loanOption"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="每日可预约次数">
                        <el-input v-model="form.appointmentNum"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        <div class="divBar"></div>
        <!-- 图片信息 -->
        <h5 class="titleInfo">
            图片信息
        </h5>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="LOGO">
                        <uploadImg  ref="uploadImg1" :fileNum="fileNum1" :hideUpload="true" :fileList="fileList1"></uploadImg>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="医院图片">
                        <uploadImg  ref="uploadImg2" :fileNum="fileNum2" :fileList="fileList2"></uploadImg>
                        <!-- <uploadImg  ref="uploadImg3" :fileNum="fileNum1" :fileList="fileList3" :hideUpload="hideUpload3"></uploadImg>
                        <uploadImg  ref="uploadImg4" :fileNum="fileNum1" :fileList="fileList4" :hideUpload="hideUpload4"></uploadImg>
                        <uploadImg  ref="uploadImg5" :fileNum="fileNum1" :fileList="fileList5" :hideUpload="hideUpload5"></uploadImg> -->
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="医院描述">
                        <Tinymce style="width:96%" v-model="form.content"></Tinymce>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item>
                <!-- <el-button style="margin-top:30px" type="primary" @click="submitFn('form')" >立即提交</el-button> -->
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import uploadImg from '@/components/UploadImg/index'
import Tinymce from '@/components/Tinymce'
import { hospitalAdd } from '@/api/hospitalAdd'
import { hospitalDetail,updateHospital } from '@/api/hospitalEdit'
import { companyList } from '@/api/branchOfficeDropDown'
import { loanDropDown } from '@/api/loanDropDown'

export default {
    name:"hospitalEdit",
    data(){
        return {
            fileNum1:1,
            fileNum2:4,
            fileList1: [],
            fileList2: [],
            fileList3: [],
            fileList4: [],
            fileList5: [],
            officeOption:[],
            // hideUpload2:false,
            hideUpload3:false,
            hideUpload4:false,
            hideUpload5:false,
            userId:"",
            statusOption:[{
                    value: 0,
                    label: '是'
                }, {
                    value: 1,
                    label: '否'
                }
            ],
            form:{
                name:"",
                tagsId:"",
                description:"",
                provinceId:"",
                cityId:"",
                address:"",
                lng:"",
                lat:"",
                status:"",
                loanId:"",
                officeId:"",
                appointmentNum:"",
                logo:"",
                star:"1",
                imageList:[],
                content:""
            },
            rules: {
                name: [
                    { required: true, message: '请输入医院名称', trigger: 'blur' },
                ],
                description: [
                    { required: true, message: '请输入医院简介', trigger: 'blur' },
                ],
                address: [
                    { required: true, message: '请输入详细地址', trigger: 'blur' },
                ],
                status: [
                    { required: true, message: '请选择是否上架', trigger: 'blur' },
                ],
                lng: [
                    { required: true, message: '请输入经度', trigger: 'blur' },
                ],
                lat: [
                    { required: true, message: '请输入纬度', trigger: 'blur' },
                ],
                officeId: [
                    { required: true, message: '请选择所属分公司', trigger: 'blur' },
                ],
                provinceId:[
                    { required: true, message: '请输入省市区', trigger: 'blur' },
                ]
            },
            options: [],
            loanOption:[],
            selectedOptions: [],
            list1:{},
            submitForm:{},
            
        }
    },
    components:{uploadImg,Tinymce},
    created(){
        this.userId = this.$route.query.userId + ""
        // 省市区数据获取
        var addData = require('../../../../static/address/area.json')
        this.options = addData
        //分公司列表
        this.getCompanyList()  
    },
    mounted(){
        this.getInfo()
    },
    methods:{
        getInfo(){
            let datas = {id:this.userId}
            // console.log(datas)
            hospitalDetail(datas).then(res=>{
                // console.log(res)
                this.form = res.data.data;
                this.selectedOptions = [
                    res.data.data.provinceId,
                    res.data.data.cityId
                ]
                this.fileList1 = [{
                    url : sessionStorage.getItem("imgUrlPrefix")+res.data.data.logo
                }]
                res.data.data.imageList.forEach((e,index)=>{
                    // if(index==0){
                        // this.hideUpload2 = true
                        this.fileList2.push({
                            url : sessionStorage.getItem("imgUrlPrefix")+res.data.data.imageList[index]
                        })
                    // }
                    // if(index==1){
                    //     this.hideUpload3 = true
                    //     this.fileList3=[{
                    //         url : sessionStorage.getItem("imgUrlPrefix")+res.data.data.imageList[1]
                    //     }]
                    // }
                    // if(index==2){
                    //     this.hideUpload4 = true
                    //     this.fileList4=[{
                    //         url : sessionStorage.getItem("imgUrlPrefix")+res.data.data.imageList[2]
                    //     }]
                    // }
                    // if(index==3){
                    //     this.hideUpload5 = true
                    //     this.fileList5=[{
                    //         url : sessionStorage.getItem("imgUrlPrefix")+res.data.data.imageList[3]
                    //     }]
                    // }
                })
                
            })
        },
        //获取分公司列表
        getCompanyList(){
            companyList().then(res =>{
                let resData = res.data.data
                let newData = [];
                resData.forEach(e => {
                    newData.push({
                        value:e.id,
                        label:e.name
                    })
                });
                this.officeOption = newData
            })
            .catch(error =>{
                this.$message.error(error);
            })
            loanDropDown().then(res =>{
                let resData = res.data.data
                let newData = [];
                resData.forEach(e => {
                    newData.push({
                        value:e.id,
                        label:e.name
                    })
                });
                this.loanOption = newData
                // console.log(newData)
            })
        },
         // 省市区数据改变
        pcaList(value) {
            let e = this.selectedOptions
            e = value
            this.form.provinceId = e[0]
            this.form.cityId = e[1]
            // this.form.area = e[2]
        },
        //字符串截取
        getCaption(obj){
            var index=obj.lastIndexOf(".com");
            obj=obj.substring(index+4,obj.length);
            // obj.match(/com(\S*)/)[1];
            return obj;
        },
        // 修改提交
        submitFn(e){
            // console.log(this.getCaption(this.$refs.uploadImg1.submitUpload()[0].url))
            // console.log(this.$refs.uploadImg1.submitUpload())
            // console.log(this.$refs.uploadImg2.submitUpload())
            this.$refs[e].validate((valid) => {
                if (valid) {
                    // if(this.$refs.uploadImg1.submitUpload()){
                        this.form.logo = this.$refs.uploadImg1.submitUpload()[0]
                    // }
                    // if(this.$refs.uploadImg2.submitUpload()){
                        let rus = this.$refs.uploadImg2.submitUpload()
                        // rus.splice(0,rus.length/2);
                        this.form.imageList = rus
                    // }
                    // this定义
                    let tf = this.form
                    console.log(tf)
                    for(var n in tf){
                        if(tf[n] instanceof Array){
                            continue
                        }
                        if(tf[n]!==(undefined||null)){
                            tf[n] += "";
                        }
                    }
                    let datas = this.form
                    console.log(JSON.stringify(datas))
                    updateHospital(datas).then(res=>{
                        // console.log(res)
                        if(!res.data.code){
                            this.$message({
                                showClose: true,
                                message: '修改成功',
                                type: 'success'
                            });
                            this.$router.push('/hospitalIndex')
                        }else{
                            this.$message({
                                showClose: true,
                                message: res.data.msg,
                                type: 'warning'
                            });
                        }
                    })
                    .catch(error =>{
                        this.$message.error(error);
                    })
                }else{
                        this.$message({
                            message: '有必填项没填，不能提交咯',
                            type: 'warning'
                        });
                        return false;
                    }
            });
        }
    }
}
</script>
<style scoped>
    .app-container{padding: 0px!important;}
</style>